<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<title>Insert title here</title>
<style type="text/css">
  table,tr,td{
    border:1px solid red;
  }
</style>
</head>
<body>
  <div>
     <ul>
       name<li><input name="name"/></li>
       sex<li><input name="sex" value="true" type="radio"/>男<input value="false" name="sex" type="radio"/>女</li>
       sal<li><input name="sal"/></li>
       birth<li><input type="date" name="birth"/></li>
       <li><button id="add">add</button></li>
     </ul>
  
  </div>
  
  <div>
    <table>
      <thead>
       <tr>
          <td>id</td>
          <td>name</td>
          <td>sal</td>
          <td>sex </td>
	      <td>birth</td>
	      <td>删除</td>
	      <td>修改</td>
       </tr>
      </thead>
      <tbody id="tb"></tbody>
    </table>
  
  </div>
  
  
  <!-- 模态框（Modal） -->  
  <!-- 
<div class="modal fade" id="showFrame" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
    <div class="modal-dialog">  
        <div class="modal-content">  
            <div class="modal-header">  
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
                <h4 class="modal-title" id="myModalLabel">修改信息</h4>  
            </div>  
            <div class="modal-body">
             <form id="modelFormId">  
             ID:<input type="text" id="modelid" name="id" readonly="true"><br>
                         姓名:<input type="text" id="modelname" name="name"><br>
                          性别:<input type="radio" id="modelsex" name="sex" checked="checked" value="true">男
            <input type="radio" id="modelsex" name="sex" value="false">女<br>
                         工资:<input type="number" id="modelsal" name="sal"><br>
                          生日<input type="date" id="modelbirth" name="birth"><br>
           </form>
            </div>  
            <div class="modal-footer">  
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
                <button type="button" class="btn btn-primary" id="finalUpdate">提交更改</button>  
            </div>  
        </div>  
       
    </div>  
      
</div>
 -->
</body>

<script type="text/javascript">
  $(function(){
     
     //ajax请求
    var ajaxProduce = function(){
        var ajax = {}
        
        ajax.post = function(requestConfig,callback,otherParam){
          requestConfig.type="POST"
          $.ajax(requestConfig).done(function(data){
          
            callback(data,otherParam);
          });
        };
        
         ajax.get = function(requestConfig,callback,otherParam){
          requestConfig.type="GET";
          requestConfig.url = "list";
          requestConfig.contentType = "application/json";
          $.ajax(requestConfig).done(function(data){
            callback(data);
          });
        };
      return ajax;
    };
     
    
     //table渲染器
    var tableProduce = function(){
       var tanleView = {};
       
       tanleView.appendTr = function(tbody,item){
         var tr = $("<tr></tr>");
           var td1 = $("<td></td>");
           var td2 = $("<td></td>");
           var td3 = $("<td></td>");
           var td4 = $("<td></td>");
           var td5 = $("<td></td>");
           var td6 = $("<td></td>");
           var td7 = $("<td></td>");
           var dbt =$("<button>删除</button>");
           var ubt =$("<button>修改</button>");
           dbt.attr("id",item.id).addClass("delete");
           dbt.on("click",function(){
               var thisTr = $(this).parent().parent();
               var id =  $(this).attr("id");
               var data = {"id":id};
               var ajax = ajaxProduce();
               var requestConfig={};
               requestConfig.url = "delete";
               requestConfig.data = JSON.stringify(data);
               requestConfig.contentType = "application/json";
               ajax.post(requestConfig,daleteTr,thisTr);
              });
           ubt.attr("id",item.id).addClass("update");
           td1.text(item.id);
           td2.text(item.cname);
           td3.text(item.sal);
           td4.text(item.sex);
           td5.text(item.birth);
           td6.append(dbt);
           td7.append(ubt);
           tr.append(td1);
           tr.append(td2);
           tr.append(td3);
           tr.append(td4);
           tr.append(td5);
           tr.append(td6);
           tr.append(td7);
           tbody.append(tr);
       
       };
      tanleView.initTable  = function(tbody,list){
         list.forEach(item=>{
           tanleView.appendTr(tbody,item);
        });
      
      };
    
      return tanleView;
    }
    
    var ajax = ajaxProduce();
    var requestConfig ={};
    requestConfig.url = "list";
    requestConfig.contentType = "application/json";
    ajax.get(requestConfig, pantTable);
    
    function pantTable(data){
      var  tanleView = tableProduce();
      var tbody = $("#tb");
      tanleView.initTable(tbody,data);
    };
    
    $("#add").on("click",function(){
      var data = {"cname":$("input[name='name']").val(),
         "sex":$("input[name='sex']").val(),
         "sal":$("input[name='sal']").val(),
         "birth":$("input[name='birth']").val()
        };
        var ajax = ajaxProduce();
       var requestConfig={};
       requestConfig.url = "addcustomer";
       requestConfig.data = JSON.stringify(data);
       requestConfig.contentType = "application/json";
       ajax.post(requestConfig,addTr);
    });
    
    function addTr(item){
      var  tanleView = tableProduce();
      var tbody = $("#tb");
      tanleView.appendTr(tbody,item);
    }
     
     function daleteTr(item,thisTr){
        thisTr.remove();
     }
     
 });
</script>
</html>